@use "sass:math";

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

// .practice-container {
//   height: rem(620);
// }

.leftBox {
  // width: 70%;
  width: 100%;
  height: 100%;
  // background: linear-gradient(to bottom, #e1f7e7, #fff);
  background: #e1f7e7;
  padding: rem(40) rem(30) rem(30);
  // border-radius: rem(10) 0 0 rem(10);
  border-radius: rem(10);
}

.identity {
  // width: 70%;
  width: 100%;
  height: 100%;
  // padding: rem(40) 0 rem(40) rem(30);
  padding: rem(40) rem(30) rem(30);
  border-radius: rem(10);
}

.rightBox {
  width: 30%;
  height: 100%;
}

.dialogTitle {
  font-size: rem(25);
  color: #333333;
  font-weight: bold;
  margin-left: rem(15);
}

.practiceInfo {
  padding: rem(20) rem(30);
  border-radius: rem(14);
  background-color: #fff;
}

.headerPic {
  width: rem(50);
  height: rem(50);
  border-radius: 50%;
}

.phone {
  font-size: rem(20);
  color: #333333;
  font-weight: bold;
}

.f20 {
  font-size: rem(20);
  color: #a2a2a2;
}

.f45 {
  font-size: rem(30);
  color: #ff595b;
  font-weight: bold;
}

.f25 {
  color: #ff595b;
  font-size: rem(25);
}

.practiceTime {
  border-radius: rem(12);
  padding: 0 rem(30) 0 rem(20);
  border: 2px solid #ffe3b4;
  font-size: rem(20);
  color: #333333;
  height: rem(90);
  line-height: rem(90);
}

.doingPractice {
  background-color: #fff;
  padding: rem(20) rem(30);
  border-radius: rem(14);
}

.practiceNum {
  color: #333333;
  font-size: rem(25);
  font-weight: 500;
}

.practiceTitle {
  color: #a2a2a2;
  font-size: rem(20);
}

.continue {
  background-color: #32c45d;
  font-size: rem(30);
  width: rem(300);
  height: rem(70);
  color: #fff;
  line-height: rem(70);
  text-align: center;
  border-radius: rem(50);
  cursor: pointer;
}

.exercises {
  margin-top: rem(55);
}

.unit {
  font-size: rem(20);
  color: #a2a2a2;
}

.downTitle {
  margin-top: rem(100);
  font-size: rem(35);
  color: #99660b;
  font-weight: 700;
}

.gettips {
  font-size: rem(25);
  color: #d19933;
  margin-top: rem(20);
}

.ewmPic {
  width: rem(180);
  height: rem(180);
  text-align: center;
  margin-top: rem(70);
}

.fh25 {
  font-size: rem(25);
  color: #333333;
}

.learnTitle {
  font-size: rem(50);
  font-weight: bold;
  color: #333;
}

.circle {
  width: rem(40);
  height: rem(40);
  background-color: #32c45d;
  border-radius: 50%;
  text-align: center;
  line-height: rem(40);
  font-size: rem(25);
  color: #fff;
}

.learnRubric {
  font-size: rem(35);
  color: #4a4a4a;
}

.w60 {
  width: 60%;
}

.learn-content {
  font-size: rem(30);
  color: #4a4a4a;
  width: calc(100% - rem(40) - rem(10));
  line-height: rem(60);
}

.w35 {
  width: 35%;
}

.fc25 {
  color: #a9a9a9;
  font-size: rem(20);
}

.learn_title {
  font-size: rem(20);
  color: #999;
}

.fh28 {
  color: #333;
  font-size: rem(20);
}

.ts_heigth {
  line-height: rem(35);
}

.contact,
.simulated {
  height: rem(100);
  width: rem(400);
  text-align: center;
  line-height: rem(100);
  border-radius: rem(50);
  color: #fff;
  font-size: rem(40);
}

.contact {
  background-color: #0995ff;
}

.simulated {
  background-color: #32c45d;
  margin-left: rem(60);
}

.examGuide {
  background-color: #f4fcf7;
  border-radius: rem(9);
  padding: rem(30) rem(20);
  margin-top: rem(20);

  .examTitle {
    font-weight: 400;
    font-size: rem(20);
  }

  .guideItem {
    font-size: rem(15);
    font-weight: 400;
    margin-top: rem(20);
  }
}

.warmTips {
  color: #999;
  font-size: rem(20);
}